<template>
    <h3>4.通过key管理状态</h3>
    <p v-for="(item, index) in names" :key="index">{{ item }}</p>
    <!-- 设置key属性，可以给vue一个用于跟踪节点的标识，用于重用和重新排序现有元素
     推荐使用一个唯一索引id来给数据标识 -->
    <div v-for="item of result" :key="item.id">
        <p>{{ item.title }}</p>
    </div>

</template>

<script>

    export default {
        data(){
            return{
                names:['baizhan', 'sxt', 'it'],
                result:[
                    {
                    id:1001,
                    title:"今日新闻1"
                    },
                    {
                    id:1002,
                    title:"今日新闻2"
                    },
                    {
                    id:1003,
                    title:"今日新闻3"
                    },
                    {
                    id:1004,
                    title:"今日新闻4"
                    }
                ]
            }
        }
    }

</script>